<template>
  <div>
    <span class="dingdan">订单管理</span>
    <div class="shanghu">
      <el-card>
        <el-form :inline="true"
                 :model="formInline"
                 class="demo-form-inline">
          <el-form-item label="商户ID:">
            <el-input v-model.trim="formInline.user"
                      size="mini"></el-input>
          </el-form-item>
          <el-form-item label="订单号:">
            <el-input v-model="formInline.num"
                      size="mini"></el-input>
          </el-form-item>
          <el-form-item label="配送方式:">
            <el-select v-model="formInline.region"
                       placeholder="全部"
                       size="mini"
                       @change="sendway">
              <el-option label="全部"
                         value="全部"></el-option>
              <el-option label="到店自提"
                         value="到店自提"></el-option>
              <el-option label="同城配送"
                         value="同城配送"></el-option>
              <el-option label="跨城配送"
                         value="跨城配送"></el-option>
            </el-select>
          </el-form-item>
          <div class="block">
            <span class="date">下单日期:</span>
            <el-date-picker size="mini"
                            type="monthrange"
                            range-separator="至"
                            start-placeholder="开始月份"
                            end-placeholder="结束月份">
            </el-date-picker>
            <el-form-item label="手机号:"
                          v-model.trim="formInline.mobile"
                          class="mobile">
              <el-input v-model="formInline.mobile"
                        type="numbers"
                        size="mini"
                        disabled></el-input>
            </el-form-item>
          </div>
          <el-form-item class="btn">
            <el-button type="primary"
                       @click="onSubmit">查询</el-button>
            <el-button type="primary"
                       @click="inSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <div class="tabs">
        <el-badge>
          <el-button size="small"
                     @click="all">全部</el-button>
        </el-badge>
        <el-badge>
          <el-button size="small"
                     @click="waitpay">待支付
          </el-button>
        </el-badge>
        <el-badge class="item">
          <el-button size="small"
                     @click="waitcarry">待自提</el-button>
        </el-badge>
        <el-badge class="item">
          <el-button size="small"
                     @click="delivery">待配送</el-button>
        </el-badge>
        <el-badge class="item">
          <el-button size="small"
                     @click="waitsend">待发货</el-button>
        </el-badge>
        <el-badge>
          <el-button size="small"
                     @click="received">已收货</el-button>
        </el-badge>
        <el-badge class="item">
          <el-button size="small"
                     @click="AfterRefund">申请退款</el-button>
        </el-badge>
        <el-badge>
          <el-button size="small"
                     @click="cancel">已取消</el-button>
        </el-badge>
      </div>
    </div>
    <el-table :data="tableData"
              @row-click="listval">
      <el-table-column prop="product_id"
                       label="商户ID"
                       align="center"
                       width="100px"></el-table-column>
      <el-table-column align="center"
                       prop="product_name"
                       label="商户名称"></el-table-column>
      <el-table-column align="center"
                       prop="ordernumber"
                       label="订单号"></el-table-column>
      <el-table-column align="center"
                       prop="pname"
                       label="商品列表"></el-table-column>
      <el-table-column align="center"
                       prop="date"
                       label="下单日期"></el-table-column>
      <el-table-column align="center"
                       prop="price"
                       label="订单总金额"></el-table-column>
      <el-table-column align="center"
                       prop="sendway"
                       label="配送方式"></el-table-column>
      <el-table-column align="center"
                       prop="send_place"
                       label="收货地址/提货人"></el-table-column>
      <el-table-column align="center"
                       prop="status"
                       label="订单状态"></el-table-column>
      <el-table-column align="center"
                       prop=""
                       label="操作">
        <el-link type="primary"
                 @click="look">查看订单</el-link>
        <el-link type="danger"
                 disabled>退款</el-link>
        <el-link type="warning"
                 disabled>取消订单</el-link>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="queryInfo.pagenum"
                   :page-sizes="[1, 5, 7, 10]"
                   :page-size="queryInfo.pagesize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
import '@/mock/mock.js'
export default {
  props: {

  },
  components: {

  },
  data () {
    return {
      formInline: {
        user: '',
        region: '',
        num: '',
        pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick (picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          }, {
            text: '今年至今',
            onClick (picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近六个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        value1: '',
        value2: ''
      },
      tableData: [],
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 15// 显示条数
      },
      total: 15
    }
  },
  created () {
    this.getShopList()
  },
  methods: {
    async getShopList () {
      const { data } = await this.$http.get('/product')
      this.tableData = data.list
      this.tableData1 = data.list
      data.list.forEach((item, index) => {
        item.newprice = item.price + '元'
      })
    },

    listval (val) {
      this.newobj = val
    },
    look () {
      setTimeout(() => {
        this.$router.push({
          name: 'lookorder',
          params: this.newobj
        })
      }, 0.1)
    },
    // 页面大小
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getShopList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getShopList()
    },
    // 重置
    inSubmit () {
      this.formInline.user = ''
      this.formInline.num = ''
      this.formInline.region = ''
      this.formInline.mobile = ''
      this.tableData = this.tableData1
    },
    // 查询
    onSubmit () {
      this.tableData = this.tableData1
      const arr = []
      this.tableData.forEach((item, index) => {
        if (item.product_id === this.formInline.user * 1 || item.shopname === this.formInline.pname * 1 || item.ordernumber === this.formInline.num * 1) {
          arr.push(item)
          this.tableData = arr
        }
      })
    },
    // 全部
    all () {
      this.formInline.user = ''
      this.formInline.num = ''
      this.formInline.region = ''
      this.formInline.mobile = ''
      this.tableData = this.tableData1
    },
    // 待支付
    waitpay () {
      this.tableData = this.tableData1
      const arr = []
      this.tableData.forEach((item, index) => {
        if (item.status === '待支付') {
          arr.push(item)
        }
      })
      this.tableData = arr
    },
    // 待自提
    waitcarry () {
      this.tableData = this.tableData1
      const arr = []
      this.tableData.forEach((item, index) => {
        if (item.status === '待自提') {
          arr.push(item)
        }
      })
      this.tableData = arr
    },
    // 待配送
    delivery () {
      this.tableData = this.tableData1
      const arr = []
      this.tableData.forEach((item, index) => {
        if (item.status === '待配送') {
          arr.push(item)
        }
      })
      this.tableData = arr
    },
    // 待发货
    waitsend () {
      this.tableData = this.tableData1
      const arr = []
      this.tableData.forEach((item, index) => {
        if (item.status === '待发货') {
          arr.push(item)
        }
      })
      this.tableData = arr
    },
    // 已收货
    received () {
      this.tableData = this.tableData1
      const arr = []
      this.tableData.forEach((item, index) => {
        if (item.status === '已收货') {
          arr.push(item)
        }
      })
      this.tableData = arr
    },
    // 售后退款
    AfterRefund () {
      this.tableData = this.tableData1
      const arr = []
      this.tableData.forEach((item, index) => {
        if (item.status === '申请退款') {
          arr.push(item)
        }
      })
      this.tableData = arr
    },
    // 已取消
    cancel () {
      this.tableData = this.tableData1
      const arr = []
      this.tableData.forEach((item, index) => {
        if (item.status === '已取消') {
          arr.push(item)
        }
      })
      this.tableData = arr
    },
    // 配送方式
    sendway () {
      this.tableData = this.tableData1

      if (this.formInline.region === '全部') {
        this.tableData = this.tableData1
        return false
      }
      const arr = []
      this.tableData.forEach((item, index) => {
        if (this.formInline.region === item.sendway) {
          arr.push(item)
        }
      })
      this.tableData = arr
    }
  }
}
</script>

<style scoped lang="less">
.dingdan {
  margin-left: 15px;
}
.block {
  font-size: 14px;
}
.el-input__inner {
  margin-left: 15px;
  margin-right: 10px;
}
.el-card {
  position: relative;
}
.mobile {
  position: absolute;
  top: 105px;
}
.btn {
  margin-left: 750px;
  margin-top: -35px;
}
/deep/.el-badge__content.is-fixed {
  top: 25px;
  right: 20px;
}
/deep/.el-form-item__content {
  margin-right: 104px;
}
.el-button--small,
.el-button--small.is-round {
  margin-top: 20px;
  padding: 15px 25px;
}
.el-link {
  padding: 0 5px;
}
.el-pagination {
  display: flex;
  justify-content: center;
}
</style>
